<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>当前计数：{{counter}}</h2>
				<button @click="increment">+</button>
				<button @click="decrement">-</button>
			</div>
		</template>

		<script src="../lib/vue.js"></script>
		<script>
			Vue.component("cpn", {
				template: "#cpn",
				// data不是函数，只是一个对象的话，会共用内存地址
				data() {
					return {
						counter: 0
					};
				},
				methods: {
					increment() {
						this.counter++;
					},
					decrement() {
						this.counter--;
					}
				}
			});
			let vm = new Vue({
				el: "#app",
				data: { message: "hello" },
				methods: {}
			});
		</script>
		<script>
			// 当data为对象时
			let obj = {
				name: "kobe",
				age: 18
			};
			function run() {
				return obj;
			}
			let obj1 = run();
			let obj2 = run();
			let obj3 = run();

			obj1.name = "why";
			console.log(obj2);
			console.log(obj3);
			// 当data为函数时
			function run1() {
				return {
					name: "houdunren",
					age: 18
				};
			}
			let obj4 = run1();
			let obj5 = run1();
			let obj6 = run1();

			obj4.name = "hdcms";
			console.log(obj5);
			console.log(obj6);
		</script>
	</body>
</html>
